<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dialog Test</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        :after, :before {
            box-sizing: border-box;
        }

        .container {
            float: left;
            margin: 10px;
            overflow: hidden;
        }

        .switch {
            width: 250px;
            overflow: hidden;
            border: solid 1px #000000;
        }

        .item {
            float: left;
            margin: 10px;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background-color: #009999;
        }

        .item.fe-focus {
            background-color: #0099ff;
        }

        .scroll {
            width: 402px;
            height: 245px;
            overflow: hidden;
            border: solid 1px #000000;
        }

        .scroll > .scroll-list {
            overflow: hidden;
        }

        .scroll.h > .scroll-list {
            width: 1000px;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body fe-role="Switch">
<div id="main" fe-role="Switch">
    <div class="container">
        <h5>Switch</h5>
        <div class="switch" fe-role="">
            <div class="item" style="width: 200px;" fe-role="Widget">点击键盘enter，弹出dialog</div>
            <div class="item" fe-role="Widget">item</div>
        </div>
    </div>
    <div class="container">
        <h5>Horizontal Scroll</h5>
        <div class="scroll h" fe-role="Scroll" fe-cfg="scroll_dir:h">
            <div class="scroll-list">
                <div class="item" fe-role="Widget">item</div>
            </div>
        </div>
        <h5>Vertical Scroll</h5>
        <div id="vscroll" class="scroll" fe-role="Scroll">
            <div class="scroll-list">
                <div class="item" fe-role="Widget">item</div>
                <div class="item" fe-role="Widget">item</div>
                <div class="item" fe-role="Widget">item</div>
                <div class="item" fe-role="Widget" fe-cfg="default_focus:yes">item</div>
                <div class="item" fe-role="Widget">item</div>
                <div class="item" fe-role="Widget">item</div>
                <div class="item" fe-role="Widget">item</div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../TVUtil.js"></script>
<script type="text/javascript" src="../FocusEngine.js"></script>
<script>
    window.onload = function () {
        var root = FocusEngine.render(document.getElementById("main"));
        var main = root;
        root.on('focus', function (e) {
            console.log('focus:');
        });
        root.on('keydown', function (e) {
            console.log('keydown:');
            if (e.keyCode === 13) {
                console.log('on ok keydown:');
                //默认样式为：主标题，次标题（可不配置），button列表（个数可以配置）
                var mydialog = new TVUtil.Dialog({
                    main:"main", //这里传入最外层的wigdet类型ID,如果底层没用到widget可以不传
                    isDefalt:true, //是否使用默认样式
                    width: 600,//dialog宽度，如果用默认样式请不要传宽度
                    height: undefined,//dialog高度，如果用默认样式请不要传高度
                    fontColor: "#FFFFFF",//显示字体颜色
                    title:"我测试一下dialog",//首行文字信息
                    info:"我是次行文字信息",//次行文字信息，没有可以不传
                    buttons:["测试第一个button","测试第二个button","测试第三个button"] //button列表，里面是button显示的文字
                });
                mydialog.setOnClickListener(function(index){
                    //传入点击回调事件，cb的入参是button的index;第一个button传入0
                    console.log("index === " + index);
                    if(index == 0){
                        mydialog.hide();
                    }
                }.bind(this));
//                mydialog.updateDialog(`<div class="switch" fe-role="Switch">
//                    <div class="item" fe-role="Widget">item</div>
//                    <div class="item" fe-role="Widget">item</div>
//                </div>`);
                mydialog.show();
            }
        });
    }
</script>
</body>
</html>
